<template>
    <div id="backgroundDiv">   
        <el-form ref="loginFormRef"
                :model="loginForm"
                class="loginContainer"
                :rules="rules"
                v-loading="loading"
                element-loading-text="正在登陆..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0,0.8)">
            <h3 class="loginTitle">云E办 登录</h3>
            <el-form-item>
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片刷新验证码" 
                style="width: 250px ; margin-right: 100px"></el-input>
                <img :src="captchaUrl" @click="updateCaptcha">
            </el-form-item>
            <el-checkbox v-model="checked">记住我</el-checkbox>
            <el-button type="primary" style="width:100%;margin-top: 15px" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
export default {
    name : "Login",
    data(){
        return{
            captchaUrl:'/captcha?time=' + new Date(),
            loginForm:{
                username:'admin',
                password:'123',
                code:''
            },
            checked:true,
            loading:false,
            rules :{
                username:[{required: true, message: '请输入用户名', trigger: 'blur'}],
                password:[{required: true, message: '请输入密码', trigger: 'blur'}],
                code:[{required: true, message: '请输入验证码', trigger: 'blur'}]
            }
        }
    },
    methods: {
        submitLogin() {
        //表单提交
        this.$refs.loginFormRef.validate((valid) => {
            if (valid) {
                //点击登录时加载动画
                this.loading = true;
                //把请求方式添加为组件，使用this即可在全局中调用
                this.postRequest("/login", this.loginForm).then((resp) => {
                    if (resp) {
                    //登录成功后关闭动画
                    this.loading = false;
                    //存储用户token
                    const token = resp.obj.tokenHead + resp.obj.token;
                    window.sessionStorage.setItem("token", token);
                    //获取路由中的地址
                    let path = this.$route.query.redirect;
                    //根据地址进行重定向跳转
                    this.$router.replace((path == '/' || path == undefined) ? '/home' : path)
                }
                this.loading = false;})
                } else {
                this.$message({
                    showClose: true,
                    message: "请检查表单！！",
                    type: "error",
                });
                return false;
        }
      });
    },
        updateCaptcha(){
            this.captchaUrl = '/captcha?time=' + new Date();
        },
    }
}

</script>

<style>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 130px 550px 150px 550px;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    #backgroundDiv{
    width: 100%;
    height: 100vh;
    background: url("~@/assets/002.jpg") center center no-repeat;
    background-size: 100% 100%;
    position:absolute;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
</style>